<div id="checkEvents"></div>
<script id="event_template" type="text/template">
<li class="{{= highlightFrom && date.valueOf() > highlightFrom ? 'new' : ''}}">
  <span class="label" title="{{= date }}">{{= date.format('LT') }}</span>
  {{ var label = (event.message == 'paused' || event.message == 'restarted') ? 'info' : (event.message == 'up') ? 'success' : 'important' }}
  <span class="label label-{{= label }}">{{= event.message }}</span>
  <a href="{{=  route + '/checks/' + event.check._id }}">{{= event.check.name }}</a>
  <a href="{{= event.check.url }}" target="_blank"><img src="{{= route }}/images/external-link-ltr-icon.png"></a>
  {{ switch (event.message) { // cannot close ejs tag here or compilation fails, sorry
       case 'paused': }}
    {{ case 'restarted': }}
      was {{= event.message }}
    {{ break; }}
    {{ case 'down': }}
      went down ({{= event.details }})
    {{ break; }}
    {{ case 'up': }}
      {{ if (event.downtime) { }}
      went back up after {{= moment.duration(event.downtime).humanize() }} of downtime
      {{ } else { }}
      is now up
      {{ } }}
    {{ break; }}
    {{ default: }}
      unnown event
  {{ } }}
</li>
</script>
<script>
$(document).ready(function() {
  var highlightFrom = window.location.search.substring(0,15) == "?highlightFrom=" ? parseInt(window.location.search.substring(15)) : Date.now();
  var event_template = document.getElementById('event_template').innerHTML;
  var ejs = require('ejs');
  ejs.open = '{{';
  ejs.close = '}}';
  var adjustHash = function() {
   var hash = window.location.hash;
    if (hash) {
      $(hash).get(0).scrollIntoView();
    }
  };
  var emptyEvents = function() {
    $('#checkEvents').html('<p>Nothing happened lately. All Green!</p>');
    adjustHash();
  }
  var updateEvents = function() {
    var queryString = typeof dateInterval == 'undefined' ? '' : dateInterval.getIntervalQueryString();
    $.getJSON('<%= url %>' + queryString, function(events) {
      if ($.isEmptyObject(events)) {
        emptyEvents();
        return;
      }
      var lines = [];
      var nbEvents = 0;
      $.each(events, function(key, eventGroup) {
        lines.push('<ul><li class="day"><h3>' + moment(key).format('dddd, MMMM Do') + '</h3><ul>');
        $.each(eventGroup, function(key, event) {
          if (!event.message) return;
          lines.push(ejs.render(event_template, { event: event, date: moment(event.timestamp), highlightFrom: highlightFrom, route: '<%= route %>' }));
          nbEvents++;
        });
        lines.push('</ul></li></ul>');
      });
      if (nbEvents == 100) {
        lines.push('<p>List limited to first 100 events - dig down to see all events</p>')
      }
      $('#checkEvents').html(lines.join(''));
      adjustHash();
    });
  }
  socket.on('CheckEvent', updateEvents);
  if(typeof dateInterval != 'undefined') {
    dateInterval.on('refresh-stats', function() {
      if (!this.stat) return emptyEvents();
      var downtime = 0;
      $.each(this.stats, function(stat) {
        downtime += stat.downtime;
      });
      if (downtime == 0) return emptyEvents();
      updateEvents();
    });
  } else {
    updateEvents();
  }
});
</script>
